<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/menuFunction.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 23px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="menuFunctionDemo">
	<!-- API区 -->
	<div title='API' tabid='tab1'><br />
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api1')">IGrid上下文菜单menuOp属性配置表</a></h2>
		<div style="display:none" id="api1">
			<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>属性</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igrid.menuFunction.openDemo('tab2');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="menus"></samp>	
						<span class="ccay-form-input">{Array} 设置igrid上下文菜单
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
							 	<ul>
							 		<li class="ccay-form-row">
	                            		<samp><h3>基础属性</h3></samp>
	                            		<span class="ccay-form-input"><h3>描述</h3></span>
	                            	</li>
	                            	<li class="ccay-form-row">
										<samp class="i18n" i18nKey="type"></samp>
										<span class="ccay-form-input">{String}	设置igrid上下文菜单的内置按钮操作类型</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="text"></samp>
										<span class="ccay-form-input">{String}	设置上下文菜单的自定义按钮的文本显示</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="css"></samp>
										<span class="ccay-form-input">{String}	设置上下文菜单的自定义按钮的样式</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="click"></samp>
										<span class="ccay-form-input">{Function} 设置上下文菜单的自定义按钮的点击事件</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="fnCheck"></samp>
										<span class="ccay-form-input">{Function} 设置上下文菜单的自定义按钮的显示事件</span>
									</li>
							 	</ul>
							</div>
						</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="target"></samp>	
						<span class="ccay-form-input">{Object} 设置igrid上下文菜单的当前对象</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="container"></samp>	
						<span class="ccay-form-input">{Object} 设置igrid上下文菜单的容器</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnGetData"></samp>	
						<span class="ccay-form-input">{Function} 设置igrid上下文菜单获取数据的事件</span>	
					</li>
				</ul>
			</div>
			</form>
		</div><br />
	</div>
	
	<!-- Demo区 -->
	<div title='IGrid内置上下文菜单' tabid='tab2'>
		<span class="showClew">备注：IGrid内置上下文菜单功能Demo介绍常用的内置的3种按钮类型</span><br /><br />
	 	<form id="menuForm" class="init ccay-form">
		<div class="ccay-form-body">
			<ul>
				<!--条件输入区域-->
				<li class="ccay-form-row">
				  <samp class="i18n" i18nKey="name"></samp>
				  <span class='ccay-form-input'><input type="text" name="name" /></span>
				</li>
			</ul>
		</div>
		<!--查询操作区域-->
		<div class="ccay-operate">
			<span id="btnMenuSearch" class="ccay-button default" >
				<a class="ccay-icon search"></a>
				<label class="i18n" i18nKey="ccay.common.button.search"></label>
			</span>
			<span class="init button ccay-button reset" >
				<a class="ccay-icon reset"></a>
				<label class="i18n" i18nKey="ccay.common.button.reset"></label>
			</span>
		</div>
		</form>
		<div class="ccay-grid-toolbar">
			<input onclick="Ccay.example.ui.igrid.menuFunction.operateTest($('#iStudent1').manager().getSelectedRecords());" value='get selected records' type='button' />	
			<input onclick="Ccay.example.ui.igrid.menuFunction.operateTest($('#iStudent1').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
			<input id="btnMenuDel" value='delete' type='button' />
			<input id="btnMenuUndoDel" value='undo delete' type=button />
			<input onclick="Ccay.example.ui.igrid.menuFunction.operateTest($('#iStudent1').manager().getDeletedRecords());" value='get deleted records' type='button' />
			<input id="btnMenuAdd" value='insert' type='button' />
			<input onclick="Ccay.example.ui.igrid.menuFunction.operateTest($('#iStudent1').manager().getInsertedRecords());" value='get inserted records' type='button' />
			<input id="btnMenuSave" value='save' type='button' />
		</div>
	 	<div id="iStudent1"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html1'>
&lt;form id="searchForm" class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>
				&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>	
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;div class="ccay-grid-toolbar">
	&lt;input id="btnAdd"value='insert' type='button' />
	&lt;input id="btnDel" value='delete' type='button' />
	&lt;input id="btnUndoDel" value='undo delete' type=button />
	&lt;input id="btnSave" value='save' type='button' />
	&lt;input onclick="operateTest($('#igridDemo').manager().getSelectedRecords());" 
		value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo').manager().getUpdatedRecords());" 
		value='get updated records' type='button' />		   
	&lt;input onclick="operateTest($('#igridDemo').manager().getDeletedRecords());" 
		value='get deleted records' type='button' />
	&lt;input onclick="operateTest($('#igridDemo').manager().getInsertedRecords());" 
		value='get inserted records' type='button' />
&lt;/div>

&lt;div id="igridDemo">&lt;/div>
	  		</pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption = {
	height: 300,
	editMode: true,
	
	//<span class="showClew">开启上下文菜单按钮</span>
	contextMenu: true,
	
	//<span class="showClew">设置上下文菜单按钮</span>
	menuOp: {
		//<span class="showClew"> 设置上下文菜单按钮；type设置内置按钮类型；del：预删除；undo：取消删除；copy：复制</span>
		menus:[{type: 'del'}, {type: 'undo'}, {type: "copy"}]
	},
	columns: [
		{columnType: "select", multi: true},
		
		//<span class="showClew"> menuable: true设置该列开启上下文菜单</span>
		{field: 'name', width:200, header: "name", menuable: true, rule: {required: true}},
		{field: 'description', width:200, header: "description"},
		{field: 'id', width:100, header: "id", editable: false}
	],
	ajax: {
		url: 'services/ccay/demo/grid/list/page/${pageSize}/${curPage}/${orderBy}'
	},
	operation: {
		search: {
			btn: '#btnSearch',
			panel: '#searchForm'
		},
		del: {
			btn: '#btnDel',
			undoBtn: '#btnUndoDel'
		},
		insert: {
			btn: '#btnAdd',
			copy: true,
			clear: ['id']
		},
		save: {
			btn: '#btnSave',
			ajax: {
				url: "services/ccay/demo/grid/batch"
			}
		}
	}
};
		
$("#igridDemo").igrid(gridOption);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#menuFunctionDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
	</div>
	
	<div title='IGrid自定义上下文菜单' tabid='tab3'>
		<span class="showClew">备注：IGrid自定义上下文菜单功能Demo介绍自定义上下文菜单按钮操作</span><br /><br />
	 	<form id="menusForm" class="init ccay-form">
		<div class="ccay-form-body">
			<ul>
				<!--条件输入区域-->
				<li class="ccay-form-row">
				  <samp class="i18n" i18nKey="name"></samp>
				  <span class='ccay-form-input'>
				    <input type="text" name="name" />
				  </span>
				</li>
			</ul>
		</div>
		<!--查询操作区域-->
		<div class="ccay-operate">
			<span id="btnMenusSearch" class="ccay-button default" >
				<a class="ccay-icon search"></a>
				<label class="i18n" i18nKey="ccay.common.button.search"></label>
			</span>
			<span class="init button ccay-button reset" >
				<a class="ccay-icon reset"></a>
				<label class="i18n" i18nKey="ccay.common.button.reset"></label>
			</span>
		</div>
		</form>
		<div class="ccay-grid-toolbar">
			<input onclick="Ccay.example.ui.igrid.menuFunction.operateTest($('#iStudent2').manager().getSelectedRecords());" value='get selected records' type='button' />	
			<input onclick="Ccay.example.ui.igrid.menuFunction.operateTest($('#iStudent2').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
			<input id="btnMenusDel" value='delete' type='button' />
			<input id="btnMenusUndoDel" value='undo delete' type=button />
			<input onclick="Ccay.example.ui.igrid.menuFunction.operateTest($('#iStudent2').manager().getDeletedRecords());" value='get deleted records' type='button' />
			<input id="btnMenusAdd" value='insert' type='button' />
			<input onclick="Ccay.example.ui.igrid.menuFunction.operateTest($('#iStudent2').manager().getInsertedRecords());" value='get inserted records' type='button' />
			<input id="btnMenusSave" value='save' type='button' />
		</div>
	 	<div id="iStudent2"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html2'>
&lt;form id="searchForm02" class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>
				&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>	
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch02" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;div class="ccay-grid-toolbar">
	&lt;input id="btnAdd02"value='insert' type='button' />
	&lt;input id="btnDel02" value='delete' type='button' />
	&lt;input id="btnUndoDel02" value='undo delete' type=button />
	&lt;input id="btnSave02" value='save' type='button' />
	&lt;input onclick="operateTest($('#igridDemo2').manager().getSelectedRecords());" 
		value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo2').manager().getUpdatedRecords());" 
		value='get updated records' type='button' />		   
	&lt;input onclick="operateTest($('#igridDemo2').manager().getDeletedRecords());" 
		value='get deleted records' type='button' />
	&lt;input onclick="operateTest($('#igridDemo2').manager().getInsertedRecords());" 
		value='get inserted records' type='button' />
&lt;/div>

&lt;div id="igridDemo2">&lt;/div>
	  		</pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js2'>
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};
var gridOption2 = {
	height: 300,
	editMode: true,
	contextMenu:true,
	menuOp:{
		menus:[{
			text: '自定义上下文菜单', 
			click: function (cell,menu) {
				alert("自定义上下文菜单");
			}
		}]
	},
	columns: [
		{columnType: "select", multi: true},
		{field: 'name', width:200, header: "name", menuable: true, rule: {required: true}},
		{field: 'description', width:200, header: "description"},
		{field: 'id', width:100, header: "id", editable: false}
	],
	ajax: {
		url: 'services/ccay/demo/grid/list/page/${pageSize}/${curPage}/${orderBy}'
	},
	operation: {
		search: {
			btn: '#btnSearch02',
			panel: '#searchForm02'
		},
		del: {
			btn: '#btnDel02',
			undoBtn: '#btnUndoDel02'
		},
		insert: {
			btn: '#btnAdd02',
			copy: true,
			clear: ['id']
		},
		save: {
			btn: '#btnSave02',
			ajax: {
				url: "services/ccay/demo/grid/batch"
			}
		}
	}
};

$S("#igridDemo2").igrid(gridOption2);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#menuFunctionDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>
	</div>
	
	<!-- Try区 -->
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	
	<!-- FAQ区 -->
	<div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
	
</div>